<template>
    <div class="e-table select-table">
        <div class="header-title">
            选择配置计划
        </div>
        <el-row class="row">
            <el-col class="wrapper" :span="13">
                <div class="title">数据</div>
                <div  class="search">
                    <el-input
                        placeholder="输入项目编号"
                        size="small"
                        style="width:200px"
                    >
                        <i slot="suffix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <span style="margin-left: 10px; color: red">双击行选择或取消选择</span>
                </div>
                <div>
                    <el-table
                        ref="initTable"
                        border
                        :data="tableData"
                        :row-style="rowClass"
                        @row-dblclick="checkRow"
                        @selection-change="changeRow"
                    >
                        <el-table-column type="selection" v-if="multiple"></el-table-column>
                        <el-table-column align="center" label="计划编号"  prop="equipName"></el-table-column>
                        <el-table-column align="center" label="计划日期"  prop="equipNum"></el-table-column>
                    </el-table>
                    <ComPagination
                        :total="pagination.total"
                        @currentChange="currentChange"
                    />
                </div>
            </el-col>
            <el-col class="wrapper" :span="10">
                <div class="title">已选择</div>
                 <el-table
                    border
                    :data="tableData1"
                    @row-dblclick="cancelRow"
                 >
                        <el-table-column align="center" label="计划编号"  prop="equipName"></el-table-column>
                        <el-table-column align="center" label="计划日期"  prop="equipNum"></el-table-column>
                    </el-table>
            </el-col>
        </el-row>
        <div class="bottom buttons">
            <div>
                <el-button class="btn-blue" type="mini" @click="confirm"
                    >确认</el-button
                >
                <el-button type="mini" class="colse-btn" @click="cancel">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import ComPagination from '@/components/pagination/pagination.vue'
export default {
    props: {
        multiple: {  //是否支持多选，true为多选false为单选
            type: Boolean,
            default: true,
        }
    },
    data () {
        return {
            pagination: {},
            tableData: [
                { equipName: '储气罐', equipNum: '1', equipId: '1', type: '1' },
                { equipName: '储气罐1', equipNum: '2', equipId: '2', type: '2' },
                { equipName: '储气罐2', equipNum: '3', equipId: '3', type: '3' },
                { equipName: '储气罐3', equipNum: '4', equipId: '4', type: '4' },
            ], //左边table的数据，虚从接口获取
            tableData1: [], //右边table选择的数据
        }
    },
    components: {
        ComPagination
    },
    mounted () {

    },

    methods: {
        getList () {
            console.log(123)
        },
        currentChange () {},
        //左边表格双击选中
        checkRow (row) {
            if(this.multiple) {
                JSON.stringify(this.tableData1).includes(JSON.stringify(row)) ? '' : this.tableData1.push(row)
                this.tableData1.forEach(item=>{
                    this.$refs.initTable.toggleRowSelection(item, true)
                })
            }
            else{
                this.tableData1 = [ row]
            }
        },
        //对所选行进行高亮显示
        rowClass ({ row }) {
            let stylejson = {}
            this.tableData1.forEach(item=>{
                if(item.equipName === row.equipName) { //暂时用equipName字段进行标识，根据实际返回字段换成其他的
                    stylejson.backgroundColor = '#ecf5ff'
                }
            })
            return stylejson
        },
        //左边表格选框选中
        changeRow (selection) {
            if(this.multiple) {
                selection.forEach(item=>{
                    let arr = this.tableData1.find(x=>x.equipName === item.equipName) //判断在右边表格里是否有左边已选择的数据
                    if(!arr) {
                        this.tableData1.push(item)  //没有则添加进去
                    }
                })
                //下面是判断左边表格取消操作，常规的赋值会让翻页后数据出现问题，无法保留其他页面的选择
                this.tableData.forEach(item=>{
                    let obj = selection.find(x=>x.equipName === item.equipName) //查找到取消的那一条
                    if(!obj) {
                        let index =  this.tableData1.findIndex(x=>x.equipName === item.equipName) //看取消的那一条是否在右边表格里
                        if(index !== -1) {
                            this.tableData1.splice(index, 1) //在的话就删除右边表格的这一条
                        }
                    }

                })
            }
        },
        //取消选择
        cancelRow (row) {
            this.tableData1.forEach((item, index)=>{
                if(row.equipName === item.equipName) {
                    this.tableData1.splice(index, 1)
                    this.$refs.initTable.toggleRowSelection(item, false)
                }else{
                    this.$refs.initTable.toggleRowSelection(item, true)
                }
            })
        },
        cancel () {
            this.$emit('cancel')
        },
        confirm () {
            this.$emit('confirm')
        }
    },

}
</script>
